```svelte
<script lang="ts">
  import * as colorPicker from "@zag-js/color-picker"
  import { normalizeProps, useMachine } from "@zag-js/svelte"

  const id = $props.id()
  const service = useMachine(colorPicker.machine, ({ id }))
  const api = $derived(colorPicker.connect(service, normalizeProps))
</script>

<div {...api.getRootProps()}>
  <label {...api.getLabelProps()}>Select Color: {api.valueAsString}</label>

  <input {...api.getHiddenInputProps()} />

  <div {...api.getControlProps()}>
    <button {...api.getTriggerProps()}>
      <div {...api.getTransparencyGridProps({ size: "10px" })}></div>
      <div {...api.getSwatchProps({ value: api.value })}></div>
    </button>
    <input {...api.getChannelInputProps({ channel: "hex" })} />
    <input {...api.getChannelInputProps({ channel: "alpha" })} />
  </div>

  <div {...api.getPositionerProps()}>
    <div {...api.getContentProps()}>
      <div {...api.getAreaProps()}>
        <div {...api.getAreaBackgroundProps()}></div>
        <div {...api.getAreaThumbProps()}></div>
      </div>

      <div {...api.getChannelSliderProps({ channel: "hue" })}>
        <div {...api.getChannelSliderTrackProps({ channel: "hue" })}></div>
        <div {...api.getChannelSliderThumbProps({ channel: "hue" })}></div>
      </div>

      <div {...api.getChannelSliderProps({ channel: "alpha" })}>
        <div {...api.getTransparencyGridProps({ size: "12px" })}></div>
        <div {...api.getChannelSliderTrackProps({ channel: "alpha" })}></div>
        <div {...api.getChannelSliderThumbProps({ channel: "alpha" })}></div>
      </div>
    </div>
  </div>
</div>
```
